<template>
  <div class='app-container'>
     <div class="app-box">
      <div class="day-top clearfix">
         <div class="top"  style="width:300px;">
          <span>出单时间：</span>
           <el-date-picker
            class='wd230'
            size="mini"
            value-format='yyyy-MM-dd'
            v-model="time1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>

       <div class="top">
       	
       	
          <span>搜索：</span>
            <el-input  class=" wd230" v-model='searchTxt' type='text' placeholder='请输入批次名称' size='mini'></el-input>
        </div>
				<div style="float:right">
					<el-button size="mini" type="info" v-on:click='back()' class='unit-sbtn'>返回</el-button>
      
        <el-button size="mini" type="primary" v-on:click='search()' class='unit-sbtn'>搜索</el-button>
    
				</div>
      </div>

      <div class="polocy-table">
          <el-table
            :data="tableData"
            v-loading="loadinging"
            stripe
            style="width: 100%">
            <el-table-column
            prop="name"
            label="批次名称"
           >
            <template slot-scope="scope">
                <span class='rightbaodan' @click="toPoliciesDetail(scope.row.id)">{{scope.row.name}}</span>
            </template>
            </el-table-column>
            <el-table-column
            prop="compony"
            label="保险公司"
           >
            </el-table-column>
            <el-table-column
            prop="alls"
             align="right"
            label="保单总量"
           >
            </el-table-column>
            <el-table-column
            prop="baonum"
             align="right"
            label="交强险保单量">
           
            </el-table-column>
               <el-table-column
            prop="shnum"
             align="right"
            label="商业险保单量">
            </el-table-column>
            <el-table-column
	            width="30"
	           >
	          
	           </el-table-column>
        </el-table>
      </div>

       <!-- <div  class='page-right'>
            <el-pagination @current-change="handleCurrentChange" :current-page.sync='currentPage' background :page-size="10" layout="total,prev, pager, next" :total="pagetotal" class='util-page' size='mini'></el-pagination>
        </div> -->
     </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
        time1:'',
        searchTxt:'',
        tableData: [],
        id:'',
        loadinging:false
        //  currentPage:1,
        // pagetotal:10,
    };
  },
  mounted() {
    if (this.$route.query.startDay) {
    this.time1 = [this.$route.query.startDay, this.$route.query.endDay];
    }else{
      let now = new Date().getFullYear();
      let a = new Date().getFullYear() + "-01-01";
      let last = new Date(now,12,0);
      let b = this.formatDate(last).substring(0,10);
      this.time1 = [a, b];
    }
     if(this.$route.query.keyword){
        this.searchTxt = this.$route.query.keyword
    }
     if (this.$route.query.pageIndex) {
       this.currentPage = this.$route.query.pageIndex;
    }
    if (this.$route.query.id) {
        this.id = this.$route.query.id;
    }
    this.getList();
  },
  computed: {
   
  },
  created() {
    
  },
  watch:{
    $route(to, from) {
      if (this.$route.query.startDay) {
        this.time1 = [this.$route.query.startDay, this.$route.query.endDay];
        }else{
          let now = new Date().getFullYear();
          let a = new Date().getFullYear() + "-01-01";
          let last = new Date(now,12,0);
          let b = this.formatDate(last).substring(0,10);
          this.time1 = [a, b];
        } 
         if(this.$route.query.keyword){
            this.searchTxt = this.$route.query.keyword
        }
         if (this.$route.query.pageIndex) {
            this.currentPage = this.$route.query.pageIndex;
        }
         if (this.$route.query.id) {
            this.id = this.$route.query.id;
        }
    }   
  },
  methods: {
  	back(){
  		this.$router.go(-1)
  	},
    getList(){
    	this.loadinging=true
      let params = {
        startDate:this.time1[0],
        endDate:this.time1[1],
        id:this.id,
        inputs:this.searchTxt
      }
      this.post(params,'services/app/report/batch').then(rs => {
        if(rs.success){
        		this.loadinging=false
          this.tableData = rs.result.items;
        }else{
        	this.loadinging=false
        }
      })
    },
    // 格式化
    formatDate(time) {
      var date = new Date(time);
      var year = date.getFullYear(),
        month = date.getMonth() + 1, //月份是从0开始的
        day = date.getDate(),
        hour = date.getHours(),
        min = date.getMinutes(),
        sec = date.getSeconds();
      var newTime =
        year +
        "-" +
        (month < 10 ? "0" + month : month) +
        "-" +
        (day < 10 ? "0" + day : day) +
        " " +
        (hour < 10 ? "0" + hour : hour) +
        ":" +
        (min < 10 ? "0" + min : min) +
        ":" +
        (sec < 10 ? "0" + sec : sec);
      return newTime;
    },
   search(){
        this.$router.push({
          name:'policyformdetail',
          query:{
            startDay:this.time1[0],
            endDay :this.time1[1],
            keyword:this.searchTxt,
            id:this.id,
            time:new Date().getTime()
            // pageIndex:this.currentPage
          }
        })
   },
   toPoliciesDetail(val){
     this.$router.push({
          name:'policiesdetail',
          query:{
            startDay:this.time1[0],
            endDay :this.time1[1],
            id:val
          }
        })
   },
   handleCurrentChange(){

   }
  }
};
</script>
<style lang="scss" scoped>
.app-box {
  color: #333;
  .day-top {
    margin-bottom: 15px;
    color: #666;
    .top {
      display: inline-block;
      width: 315px;
      margin-bottom: 15px;
      margin-left: 20px
    }
  }
  .polocy-table{
    // margin-top: 30px;
    .rightbaodan{
        color: #027dca;
        cursor: pointer;
    }
  }
}
.page-right{
        width: 100%;
        text-align: right;
        margin-top: 30px;
    }
</style>